<script setup lang='ts'>
import type { IMarkerIconExposedProps, IPoi, IPoiExt } from '@/common/MapTypes';
import spacePanelItem from './spacePanelItem.vue'
import { useMarkerStore } from '@/stores/useMarkerStore';
import { useUserStore } from '@/stores/useUserStore';
import { storeToRefs } from 'pinia';
const { setActiveMarker } = useMarkerStore()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

defineProps<{
  pois: IPoi[]
}>()

const emits = defineEmits(['centerChange', 'addMarker', 'writeJournal'])

async function handleAddMarker(e: IPoi) {
  if (!userInfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      confirmText: '去登录',
      success: (e) => {
        if (e.confirm) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    return
  }

  emits("addMarker", e)
}

function handleWritejournal(e: IPoiExt) {
  if (!userInfo.value) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      confirmText: '去登录',
      success: (e) => {
        if (e.confirm) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    return
  }

  setActiveMarker({
    poi: e,
    container: null as Element | null,
  } as IMarkerIconExposedProps)

  emits("writeJournal", e)
}

function handleCenterChange(e: IPoi) {
  emits("centerChange", e)
}

</script>

<template>
  <view class='space-panel__container'>
    <view class="space-panel__list pt-20">
      <spacePanelItem @center-change="handleCenterChange" @add-marker="handleAddMarker"
        @write-journal="handleWritejournal" v-for="poi in pois" :key="poi?.id" v-bind="poi" />
    </view>
  </view>
</template>

<style scoped lang='scss'>
@import "./spacePanel.scss";
</style>